<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/home/plugins/layer/layer.js"></script>
    <script src="__PUBLIC__/mui/js/mui.min.js"></script>
    <script src="__PUBLIC__/mui/js/mui.picker.min.js"></script>
    <script src="__PUBLIC__/js/angular.js"></script>
    <script src="__PUBLIC__/common.js"></script>
    <style>
        .mui-input-group {
            margin-top: 10px;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-group label {
            width: 38%;
            color: #6a6a6a;
            font-size: 15px;
        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 62%;
        }

        .content {
            width: 60%;
            float: right;
            line-height: 40px;
            height: 40px;
            text-indent: 2em;
            font-size: 15px;
            text-align: right;
            padding-right: 1em;

        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }


        .oauth-area .oauth-btn {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-size: 30px 30px;
            background-position: center center;
            background-repeat: no-repeat;
            margin: 0px 20px;
            /*-webkit-filter: grayscale(100%); */
            border: solid 1px #ddd;
            border-radius: 25px;
        }

        .oauth-area .oauth-btn:active {
            border: solid 1px #aaa;
        }

        .oauth-area .oauth-btn.disabled {
            background-color: #ddd;
        }


        .fanyong-title p {
            line-height: 40px;
            font-size: 16px;
            margin: 0;
            color: #111111;
        }

        .mui-input-row .mui-input-clear::-webkit-input-placeholder {
            text-align: center;
            font-size: 14px;
        }

        #user-login .mui-input-row .time {
            width: 65%;
            color: black;
            font-size: 16px;
        }

        #user-login .mui-input-row .status {
            width: 35%;
            font-size: 14px;
            font-weight: bold;
            font-family: "Microsoft YaHei UI Light";

        }

        .mui-input-group .mui-input-row:after {
            left: 0;
        }

        .mui-input-group .mui-input-row:nth-child(1):after {
            background: none;
        }

        .mui-input-group .mui-input-row:last-child:after {
            background: none;
        }

        #user-login .mui-input-group {
            margin-top: 0;
        }

        #user-login .mui-input-group {
            background: white;
        }

        .login-tab div {
            border: 1px solid white;
            box-sizing: border-box;
        }

        .btn {
            font-size: 14px;
            text-align: center;
        }

        .daili::-webkit-input-placeholder {
            font-size: 15px;
        }

        .mui-segmented-control .mui-control-item.mui-active {
            color: #ff6769;
            background: #fff;
        }

        .mui-segmented-control .mui-control-item {
            border-left: 1px solid #EDEDED;
            background: #fff;
        }

        .mui-segmented-control .mui-control-item {
            color: #666666;
        }

    </style>

</head>

<body ng-app="myApp" ng-controller="Ctrl" ng-cloak>
<header class="mui-bar mui-bar-nav" style="background:#f3363a;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white"></a>
    <h1 class="mui-title" style="color: white">销售数据</h1>
</header>
<div class="mui-content" id="user-login">
    <form class="mui-input-group" method="post" action="" style="margin-top: 0"
          data-validator-option="{stopOnError:false, timely:true,theme:'layer'}">

        <div class="mui-input-row" style="margin-top: 5px">
            <input name='begin_time' type="text" data-options='{"type":"date","beginYear":2010,"endYear":2022}'
                   id="begin" class=" btn mui-input-clear mui-input" readonly placeholder="选择查询起始时间"
                   style="width: 50%;float: left" ng-model="begintime" ng-blur="getinfo()">
            <input name='end_time' type="text" id="end" class=" btn mui-input-clear mui-input" readonly
                   placeholder="选择查询结束时间" style="width: 50%;float: right" ng-model="endtime" ng-change="getinfo()" >
        </div>
    </form>
    <div id="list">
        <div class="mui-input-group" style="margin-top: 3px">
            <div class="mui-input-row">
                <label class="time"> 会员订单</label>
                <div class="content"></div>
            </div>
            <div style="width: 100%;height: 1px;background: #c8c7cc;-webkit-transform: scaleY(.5);transform: scaleY(.5);"></div>
            <div class="mui-input-row">
                <label>总金额</label>
                <div class="content">
                    {{memberTotal.total}}元
                </div>
            </div>
            <div style="height: 5px;width: 100%;background:#efeff4;"></div>
            <div class="mui-input-row">
                <label class="time">下属代理</label>

            </div>
            <div class="mui-input-row">
                <label>报单量</label>
                <div class="content">
                    {{agenOnlineTotal.count}}单
                </div>
            </div>
            <div class="mui-input-row">
                <label>报单额</label>
                <div class="content">
                    {{agenOnlineTotal.total}}元
                </div>
            </div>
            <div class="mui-input-row">
                <label>下单量</label>
                <div class="content">
                    {{agenOrderTotal.count}}单
                </div>
            </div>
            <div class="mui-input-row">
                <label>下单额</label>
                <div class="content">
                    {{agenOrderTotal.total}}元
                </div>
            </div>
        </div>
</div>
</div>
<include file="./Application/Home/View/pub/agentfoot.html" name="m"/>
<script>
    var app = getApp('myApp', []);
    app.controller('Ctrl', function($scope,$http) {
        $scope.getinfo = function () {
            $http({
                method:'POST',
                data:{'begintime':$('#begin').val(),'endtime':$('#end').val()},
                url: "/index.php/Home/Agen/getAgenSubdntCount"
            }).then(function successCallback(response) {
                //console.log(response.data)
                if(response.data.code==-1){
                    layer.msg(response.data.msg,{time:1000})
                } else if(response.data.code==0){
                    $scope.memberTotal = response.data.data.memberTotal;
                    $scope.agenOnlineTotal = response.data.data.agenOnlineTotal;
                    $scope.agenOrderTotal = response.data.data.agenOrderTotal;
                }
            }, function errorCallback(response) {
                errorHandle(response);
            });
        }

        $scope.getinfo();
        (function ($) {
            $.init();
            var result = $('#result')[0];
            var btns = $('#begin');
            btns.each(function (i, btn) {
                btn.addEventListener('tap', function () {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        document.getElementById("begin").value = rs.text
                        picker.dispose();
                        $scope.getinfo();
                    });
                }, false);
            });

            var btns = $('#end');
            btns.each(function (i, btn) {
                btn.addEventListener('tap', function () {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        document.getElementById("end").value = rs.text
                        picker.dispose();
                        $scope.getinfo();
                    });
                }, false);
            });

        })(mui);

    })

</script>

<link rel="stylesheet" href="__PUBLIC__/mui/css/mui.css">
<link rel="stylesheet" href="__PUBLIC__/mui/css/mui.picker.min.css">
</body>
</html>
